<template>
  <div v-loading="loading">
    <div>
      <e-container>
        <div class="search-container">
          <form action="javascript:;" @submit="searchSubmit" class="form-search">
            <table class="jd-search">
              <tbody>
                <tr>
                  <td class="sousuo">
                    <div class="sousuo-title">days 目的地</div>
                    <el-input type="text" v-model="search.city" placeholder="例如乌鲁木齐"></el-input>
                  </td>
                  <td class="sousuo">
                    <div class="sousuo-title">Month 时间</div>
                    <el-input type="text" v-model="search.month" placeholder="例如1月或1"></el-input>
                  </td>
                  <td class="sousuo">
                    <div class="sousuo-title">Days 天数</div>
                    <el-input type="text" v-model="search.days" placeholder="例如4天或4"></el-input>
                  </td>
                  <td>
                    <div class="sousuobutton">
                      <el-button type="success" @click="searchSubmit">搜索</el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
        <div class="content-section">
          <div class="strategy-title">旅游攻略</div>
          <div class="strategy-title2">CHECK OUT BEST PROMOTION TOURS</div>
          <div class="snick clearfix">
            <div class="services-container">
              <div v-for="(r, index) in list" :key="index" class="services" :class="'overlap-' + (index % 5)" :style="{ animationDelay: (index * 0.08) + 's' }">
                <router-link :to="'/strategydetail?id=' + r.id">
                  <e-img-box :src="r.photo" class="snocks"></e-img-box>
                  <h2 v-html="$substr(r.strategyName, 15)"></h2>
                  <!--                  <p v-html="$substr(r.introduction, 30)"></p>-->
                </router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="strategy-bottom">
          <div class="strategy-title4">The world is a book</div>
          <div class="strategy-title4">If you do not travel around</div>
          <div class="strategy-title4">you will always see the same page</div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<style type="text/scss" scoped lang="scss">
.strategy-title {
  text-align: center;
  font-size: 25px;
  width: 100%;
}

.strategy-title2 {
  margin-bottom: 3%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

.strategy-title3 {
  margin-bottom: 0.5%;
  text-align: center;
  font-size: 15px;
  width: 100%;
}

.strategy-title4 {
  margin-bottom: 0.5%;
  color: #8c8c8c;
  text-align: center;
  font-size: 15px;
  width: 100%;
}

.sousuo .sousuo-title {
  padding-left: 2%;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sousuobutton {
  padding-top: 25%;
  width: 100%;
  height: 100%;
}

::v-deep .e-container {
  overflow: visible; /* 确保不裁剪子元素 */
  position: relative; /* 为容器创建层级上下文 */
  padding-bottom: 1%;
  //padding-left: 5%;
  width: 1200px;
  margin: 0 auto;
}

.search-container {
  margin: 10px 0 15px 0;
  background-color: #FFFFFF;
}

.form-search {
  margin-bottom: 20px;

  .jd-search {
    font-family: math;
    border-top: 0;
    border-left: 0;
    width: 100%;

    td {
      border-right: 0;
      border-bottom: 1px solid #DEDEDE;
      padding: 10px;
    }

    .search-radio a {
      display: inline-block;
      padding: 8px 10px;
      margin-right: 15px;
      border-radius: 5px;
    }

    .search-radio a.active {
      background: #7fabbe;
      color: #ffffff;
    }

  }

  .info-search-button {
    margin-left: 40px;
  }

  .info-search-input {
    margin-left: 400px;
  }
}

.info-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  color: #fff;
}

.info-header {
  text-align: center;
  background-color: #7fabbe;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
}

.content-section {
  margin-bottom: 20px;
}

.services-container {
  display: flex;
  flex-wrap: wrap;
  overflow: visible; /* 允许子元素超出容器显示 */
  position: relative;
}

/* 在 <style> 部分，添加以下动画效果 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(120px); /* 从下方进入 */
  }
  80% {
    opacity: 1;
    transform: translateY(-10px); /* 超过目标位置 */
  }
  90% {
    opacity: 1;
    transform: translateY(5px); /* 超过目标位置 */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 动画结束时恢复原位 */
  }
}

.services {
  position: relative;
  z-index: auto;
  text-align: center;
  width: calc(20% - 10px);  /* 每行显示五个 */
  margin: 10px 5px;
  
  /* 添加淡入和从下方滑动的动画 */
  opacity: 0;
  animation: fadeInUp 0.3s ease-out forwards; /* 动画持续1秒，ease-out让动画平滑结束 */
}

/* 鼠标悬停时为卡片添加过渡效果 */
.snocks {
  box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.3);
  width: 100%;
  height: auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease; /* 让transform和box-shadow属性有平滑过渡 */
  position: relative; /* 确保z-index生效 */
}

.snocks:hover {
  position: fixed;
  transform: scale(1.05); /* 放大卡片 */
  box-shadow: 6px 4px 20px rgba(0, 0, 0, 0.5); /* 增加阴影 */
  position: relative;
  z-index: 9999; /* 鼠标悬停时将其置于最上层 */
}


h2 {
  font-size: 18px;
  color: #333;
}


  

.overlap-0,
.overlap-1 {
  z-index: 5;
  margin-top: 0;
}

.overlap-1,
.overlap-6 {
  z-index: 4;
  margin-top: 20px;
}

.overlap-2,
.overlap-7 {
  z-index: 3;
  margin-top: 40px;
}

.overlap-3,
.overlap-8 {
  z-index: 2;
  margin-top: 60px;
}

.overlap-4,
.overlap-9 {
  z-index: 1;
  margin-top: 80px;
}

::v-deep .subtitle-modelbox-widget .section-title {
  font-size: 20px !important;
  font-family: "Open Sans", sans-serif !important;
  border-bottom: 1px solid #e3e3e3 !important;
  padding-bottom: 10px !important;
  color: #333 !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  margin-top: 0px !important;
  padding-left: 20px !important;
  padding-top: 20px !important;
}

::v-deep .el-input {}

::v-deep button {
  border-radius: 35px;
  -webkit-appearance: button;
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:hover {
  background-color: #b3cdd8;
  border-color: #b3cdd8;
}

::v-deep button:active {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:focus {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep .img-box .over {
  /* background: #555; */
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 232px;
  padding: 18px;
  width: 100%;
  height: 40%;
  line-height: 30px;
  color: #f0f0f0;
  font-size: 15px;
  opacity: 0;
  filter: alpha(opacity=0);
}
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';
import EModuleModelBox from "@/components/module/model-box.vue";

export default {
  components: { EModuleModelBox },
  data() {
    return {
      loading: false,
      list: [],
      search: {
        city: '',
        month: '',
        days: ''
      },
      page: 1,
      pagesize: 12,
      totalCount: 0,
      total: {}
    };
  },
  methods: {
    searchSubmit() {
      this.loadList(1);
    },
    loadList(page) {
      if (this.loading) return;
      this.loading = true;
      this.page = page;
      // 将查询参数存储到Cookie中
      const filter = extend(true, {}, this.search, { page: page + "", pagesize: this.pagesize + "" });
      for (let key in filter) {
        document.cookie = `${key}=${filter[key]}; path=/`;
      }
      const diff = objectDiff.diff(filter, this.$route.query);
      if (diff.changed != 'equal') {
        this.$router.replace({ path: this.$route.path, query: filter });
      }
      this.$post(api.strategy.weblist, filter).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    selectRadio(target, strategyName) {
      this.search[target] = strategyName;
      this.searchSubmit(1);
    }
  },
  beforeRouteUpdate(to, form, next) {
    // 从Cookie中读取查询参数并更新search对象
    const cookies = document.cookie.split('; ').reduce((acc, cookie) => {
      const [key, value] = cookie.split('=');
      acc[key] = value;
      return acc;
    }, {});

    this.search = extend(this.search, cookies);

    if (cookies.page) {
      this.page = Math.floor(cookies.page);
    }
    if (cookies.pagesize) {
      this.pagesize = Math.floor(cookies.pagesize);
    }

    this.loadList(1);
    next();
  },
  created() {
    // 从Cookie中读取查询参数并更新search对象
    const cookies = document.cookie.split('; ').reduce((acc, cookie) => {
      const [key, value] = cookie.split('=');
      acc[key] = value;
      return acc;
    }, {});

    this.search = extend(this.search, cookies);

    if (cookies.page) {
      this.page = Math.floor(cookies.page);
    }
    if (cookies.pagesize) {
      this.pagesize = Math.floor(cookies.pagesize);
    }
    this.loadList(this.page);
  }
}
</script>
